<template>
  <div>
    <div class="card">
      <a-form :model="formData" layout="inline">
        <a-form-item>
          <a-input v-model="formData.search.phone" :allowClear="true" placeholder="请输入手机号"></a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="formData.search.realname" :allowClear="true" placeholder="请输入真实姓名"> </a-input>
        </a-form-item>
        <a-form-item>
          <a-select
            v-model="formData.search.status"
            style="width: 200px; margin-right: 10px"
            :allowClear="true"
            placeholder="请选择审核状态"
          >
            <a-select-option v-for="item in examine" :key="item">
              {{ item == 1 ? '成功' : item == 10 ? '审核中' : '驳回' }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-select :value="formData.search.all_brand" style="width: 120px" :options="brandList" @change="handleChange">
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="queryFile"> 查询 </a-button>
          <a-button type="primary" @click="resetting" style="margin-left: 20px" html-type="submit"> 重置 </a-button>
        </a-form-item>
      </a-form>
      <a-table
        :row-selection="rowSelection"
        @change="change"
        :loading="loading"
        :data-source="dataSource"
        :columns="columns"
        rowKey="id"
        :pagination="{
          pageSize: formData.page_size,
          pageSizeOptions: ['20', '30', '40', '50'],
          size: 'small',
          showQuickJumper: true,
          showSizeChanger: true,
          total: total,
          current: formData.page,

          showTotal: total => `共 ${total} 条`
        }"
      >
        <div slot="operate" slot-scope="text, record">
          <div v-show="record.status == 10">
            <a-space size="small">
              <a-button @click="checkRealVerify($event, record, 1)" :loading="record.checking">通过</a-button>
              <a-button @click="checkRealVerify($event, record, -1)" :loading="record.checking">驳回</a-button>
            </a-space>
          </div>
          <div
            v-show="record.status !== 10"
            :style="record.status == 1 ? 'color:green' : record.status == -1 ? 'color:red' : ''"
          >
            已{{ record.status == 1 ? '成功' : record.status == -1 ? '驳回' : '' }}
          </div>
        </div>
        <div slot="Imag" slot-scope="text, record" v-viewer>
          <img :src="record.image" style="width: 100px; height: 80px" alt="" />
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
import { handheldAuthentication, checkRealVerify } from '@/api/userinfo.js'

export default {
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      selectedRowKeys: [],
      examine: [1, 10, -1],
      brandList: [{ label: '全部品牌', value: 1 }],
      total: 0,
      loading: false,
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          realname: '',
          phone: '',
          status: 10,
          all_brand: 1
        }
      },
      dataSource: [],

      columns: [
        {
          title: '#',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '所属品牌',
          dataIndex: 'brand_name',
          key: 'brand_name'
        },
        {
          title: '姓名',
          dataIndex: 'realname',
          key: 'realname'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          key: 'phone'
        },
        {
          title: '身份证号',
          dataIndex: 'id_card',
          key: 'id_card'
        },
        {
          title: '手持证件',
          dataIndex: 'image',
          key: 'image',
          scopedSlots: { customRender: 'Imag' }
        },
        {
          title: '提交时间',
          dataIndex: 'ctime',
          key: 'ctime'
        },
        {
          title: '审核时间',
          dataIndex: 'verify_time',
          key: 'verify_time'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operate' },
          align: 'center'
        },
        {
          title: '短信',
          dataIndex: 'is_send_sms_text',
          key: 'is_send_sms_text'
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    //选择品牌
    handleChange(e) {
      this.formData.search.all_brand = e
    },
    //重置
    resetting() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          realname: '',
          phone: '',
          status: -1,
          all_brand: 1
        }
      }
      this.getList()
    },
    change(e) {
      this.formData.page_size = e.pageSize
      this.formData.page = e.current
      this.getList()
    },
    //搜索按钮
    queryFile() {
      this.getList()
    },
    getList() {
      this.loading = true
      if (this.formData.search.status == '驳回') this.formData.search.status = -1
      if (this.formData.search.all_brand == '全部品牌') this.formData.search.all_brand = 1
      handheldAuthentication(this.formData)
        .then(res => {
          this.total = res.data.total
          this.dataSource = res.data.list
          if (this.formData.search.status == -1) this.formData.search.status = '驳回'
          if (this.formData.search.all_brand == 1) this.formData.search.all_brand = '全部品牌'
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 手持审核
    async checkRealVerify(e, item, status) {
      if (item.checking) return this.$message.error('审核中...')
      this.$set(item, 'checking', true)
      try {
        await checkRealVerify({ id: item.id, status: status })
        let tip = status == 1 ? '审核' : status == -1 ? '驳回' : '操作'
        this.$message.success(tip + '成功')
      } catch (e) {
        this.$message.error(e.data.msg || '审核失败')
      }
      this.$set(item, 'checking', true)
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}

/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
</style>
